<template>
  <div>
    <el-checkbox-group v-model="selectedOptions">
      <el-checkbox
          v-for="option in options"
          :key="option"
          :label="option"
          :value="option"
          :disabled="selectedOptions.includes(option)"
          @change="handleCheckboxChange(option)"
      >
        {{ option }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElCheckbox, ElCheckboxGroup } from 'element-plus';

const options = [
  '集成docker实现一键部署',
  '升级springboot到最新版本3.x',
  '集成ehcache实现本地缓存切换',
  '集成websocket实现实时通信',
  '集成electron实现桌面应用程序',
  '集成atomikos实现分布式事务',
  '集成minio实现分布式文件存储',
  '集成easy-es实现分布式全文检索',
  '使用localstorage代替cookie',
  '使用undertow来替代tomcat容器',
  '集成actuator实现优雅关闭应用',
  '集成aj-captcha实现滑块验证码',
  '集成sharding-jdbc实现分库分表',
  '集成just-auth实现第三方授权登录',
  '集成watermark实现页面添加水印',
  '集成mybatisplus实现mybatis增强',
  '集成easyexcel实现excel表格增强',
  '集成knife4j实现swagger文档增强',
  '集成redisson实现redis分布式锁',
  '集成ip2region实现离线IP地址定位',
  '集成jsencrypt实现密码加密传输方式',
  '集成httpclient实现http接口增强',
  '集成druid实现数据库密码加密功能',
  '集成browscap读取浏览器用户代理',
  '集成dynamic-datasource实现多数据源增强',
  '集成dynamic-datasource实现多数据源增强'
];

const selectedOptions = ref<string[]>([]);
// 从 localStorage 中加载选中的选项
const loadSelectedOptions = () => {
  const storedOptions = localStorage.getItem('selectedOptions');
  if (storedOptions) {
    selectedOptions.value = JSON.parse(storedOptions);
  }
};
// 保存选中的选项到 localStorage
const saveSelectedOptions = () => {
  localStorage.setItem('selectedOptions', JSON.stringify(selectedOptions.value));
};
const handleCheckboxChange = (option: string) => {
  if (!selectedOptions.value.includes(option)) {
    // 如果选项未被选中，则添加到选中列表
    selectedOptions.value.push(option);
    saveSelectedOptions(); // 保存到 localStorage
  }
};
// 页面加载时加载已保存的选项
onMounted(() => {
  loadSelectedOptions();
});
// 如果需要额外的逻辑处理，可以在这里添加
</script>

<style scoped>

</style>